<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>

<!--
        组件间参数的传递
           子组件  => 父组件

-->
<div id="app">
    <h2>学生的总人数是:{{number}}</h2>
<!--    使用组件时向组件内部传递函数  @事件名=''-->
    <student @gettotal="getTotal"></student>
</div>

<script>
/*
*   组件间的参数传递
*      父组件=>子组件   props   props实现参数的传递是一种单向数据流  只能从父组件向子组件传递参数
*      子组件=>父组件   借助函数实现参数传递   在使用子组件时通过父组件将函数传递到子组件中  在子组件中调用函数 将参数传递到父组件中
*
* */
    const student = {
        template: `
          <div>
          <h2>学生信息展示</h2>
          <div v-for="(student,index) in students" :key="index">
            <p>学生姓名:{{ student.name }}</p>
            <p>学生年龄:{{ student.age }}</p>
            <p>学生性别:{{ student.sex }}</p>
            <hr>
          </div>
          <button @click="total">统计学生人数</button>
          </div>
        `,
        data() {
            return {
                students: [
                    {
                        name: 'jack',
                        age: 20,
                        sex: '男'
                    }, {
                        name: 'xiaoming',
                        age: 21,
                        sex: '男'
                    }, {
                        name: 'xiaohei',
                        age: 18,
                        sex: '男'
                    }
                ]
            }
        },
        methods:{
            total(){
                console.log(this.students.length)  // 3
            //    调用父组件传递的函数
                this.$emit('gettotal',this.students.length)
            }
        }
    }

    let vm = new Vue({
        el: '#app',
        data: {
            number:'loading....'
        },
        methods: {
            getTotal(number){
                console.log("----------parent----------")
                this.number = number
            }
        },
        components: {
            student
        }
    })
</script>
</body>
</html>